<script setup lang="ts">
import { graphic } from 'echarts/core'
import { computed, onMounted, shallowRef } from 'vue'

import useEcharts, { type EChartsOption } from '~/composables/chart'
import BlockHead from './block-head.vue'

import defaults from './default-chart-option'

import type { ResignationReasonsInfo } from '../type'

defineOptions({
  name: 'ItemNine',
})

const props = defineProps<{
  data: ResignationReasonsInfo
}>()

const { chartRef, setOption } = useEcharts()

const data = shallowRef<{ name: string, value: string }[]>([])

const option = computed<EChartsOption>(() => {
  const max = data.value.reduce((acc, cur) => acc += +cur.value, 0)
  return {
    tooltip: {
      ...defaults.tooltip,
      trigger: 'item',
    },
    radar: {
      alignTicks: false,
      indicator: data.value.map((item) => {
        return {
          name: item.name,
          max,
          min: 0,
          color: 'rgba(255,255,255,0.6)',
        }
      }),
      center: ['50%', '50%'],
      radius: '70%',
      // splitNumber: 3,
      startAngle: 90,
      splitArea: {
        areaStyle: {
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 10,
          color: ['rgba(20, 205, 251, 0.4)', 'rgba(20, 205, 251, 0.2)', 'rgba(20, 205, 251, 0.1)', 'rgba(20, 205, 251, 0.05)', 'rgba(20, 205, 251, 0.02)'],
        },
      },
      axisLine: {
        alignTicks: false,
        lineStyle: {
          color: 'rgba(46, 137, 250, 0.4)',
        },
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(46, 137, 250, 0.2)',
        },
      },
    },
    series: [{
      name: '离职情况分析',
      type: 'radar',
      symbol: 'emptyCircle',
      symbolSize: 6,
      lineStyle: {
        color: new graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: 'rgba(20, 205, 251, 1)' },
          { offset: 1, color: 'rgba(161, 7, 246, 1)' },
        ]),
      },
      areaStyle: {
        color: new graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: 'rgba(46, 137, 250, 1)' },
          { offset: 1, color: 'rgba(23, 230, 255, 1)' },
        ]),
      },
      data: [{
        value: data.value.map(item => item.value),
      }],
    }],
  }
})

onMounted(() => {
  data.value = Object.keys(props.data).map((v) => {
    return {
      name: v,
      value: props.data[v],
    }
  })
  setOption(option.value)
})
</script>

<template>
  <div class="flex flex-col">
    <BlockHead title="离职情况分析" />
    <div class="block-body h-48 w-full flex flex-auto flex-wrap">
      <div ref="chartRef" style="width:100%;height:100%" />
    </div>
  </div>
</template>
